<!-- 订单管理 -->
<template>
  <div class="dashboard-container order-list customer-list-box">
    <div class="app-container">
      <!-- 订单顶部搜索 -->
      <el-card
        shadow="never"
      >
        <el-form
          :ref="orderSearchFormData"
          :model="orderSearchFormData"
          class="Order"
          label-width="120px"
        >
          <div class="orderOne">
            <el-form-item
              label="订单编号："
            >
              <el-input
                v-model="orderSearchFormData.id"
                style="width:380px"
                placeholder="请输入订单编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="发件人姓名：">
              <el-input
                v-model="orderSearchFormData.senderName"
                style="width:380px"
                placeholder="请输入发件人姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="收件人姓名：">
              <el-input
                v-model="orderSearchFormData.receiverName"
                style="width:380px"
                placeholder="请输入收件人姓名"
              ></el-input>
            </el-form-item>
          </div>
          <div class="orderTwo">
            <el-form-item label="订单状态：">
              <el-select
                v-model="orderSearchFormData.status"
                style="width:380px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发件人电话">
              <el-input
                v-model="orderSearchFormData.senderPhone"
                style="width:380px"
                placeholder="请输入发件人电话"
              ></el-input>
            </el-form-item>
            <el-form-item label="收件人电话">
              <el-input
                v-model="orderSearchFormData.receiverPhone"
                style="width:380px"
                placeholder="请输入发件人电话"
              ></el-input>
            </el-form-item>
          </div>
          <div class="orderThree">
            <el-form-item label="付费状态：">
              <el-select
                v-model="orderSearchFormData.paymentStatus"
                style="width:380px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in PayStatus"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              class="page-form-item"
              label="发件人地址:"
            >
              <el-select
                v-model="orderSearchFormData.senderProvince"
                placeholder="请选择省"
                clearable
                style="width:120px"
                @change="change"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                />
              </el-select>

              <el-select
                v-model="orderSearchFormData.senderCity"
                placeholder="请选择市"
                clearable
                style="width:125px"
                @change="changecity"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                />
              </el-select>
              <el-select
                v-model="orderSearchFormData.senderCounty"
                clearable
                style="width:125px"
                placeholder="请选择县/区"
              >
                <el-option
                  v-for="item in countyList"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              class="page-form-item"
              label="收件人地址:"
            >
              <el-select
                v-model="orderSearchFormData.receiverProvince"
                placeholder="请选择省"
                clearable
                style="width:120px"
                @change="changeReceiver"
              >
                <el-option
                  v-for="item in receiverList"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                />
              </el-select>

              <el-select
                v-model="orderSearchFormData.receiverCity"
                placeholder="请选择市"
                clearable
                style="width:125px"
                @change="changereceivercity"
              >
                <el-option
                  v-for="item in receiverCityList"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                />
              </el-select>
              <el-select
                v-model="orderSearchFormData.receiverCounty"
                clearable
                style="width:125px"
                placeholder="请选择县/区"
              >
                <el-option
                  v-for="item in receiverCountyList"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="orderSreach">
            <el-form-item>
              <el-button
                size="middle"
                type="warning"
                @click="handleFilter"
              >搜索</el-button>
              <el-button
                class="reset-btn"
                @click="resetForm('orderSearchFormData')"
              >重置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-card>
      <!-- 订单列表 -->
      <template>
        <div class="el-cart table-card-box is-never-shadow">
          <el-card
            class="table-card-box"
            shadow="never"
          >
            <el-table
              :key="tableKey"
              ref="multipleTable"
              highlight-current-row
              :data="dataList"
              fit
              style="width: 100%"
              stripe
            >
              <div
                v-show="(!dataList || dataList.length <= 0) && !listLoading && searchkey"
                slot="empty"
                shadow="never"
              >
                <img
                  src="@/icons/编组 15.png"
                  alt="无数据"
                  style="margin-top: 20px;width: 50%;height: 50%;"
                >
                <p
                  style="
                      margin-top: -20px;
                      padding-bottom: 0px;
                    "
                >没有找到您要的内容哦~</p>
              </div>
              <el-table-column
                label="序号"
                width="60"
                type="index"
                :index="indexMethod"
              >

              </el-table-column>
              <el-table-column
                prop="id"
                label="订单编号"
                width="160"
              >
              </el-table-column>
              <el-table-column
                prop="transportOrder.id"
                label="运单编号"
                width="135"
              >
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="下单时间"
                width="160"
              >
              </el-table-column>
              <el-table-column
                prop="status"
                label="订单状态"
                width="80"
              >
              </el-table-column>
              <el-table-column
                prop="senderName"
                label="发件人姓名"
                width="100"
              >
              </el-table-column>
              <el-table-column
                prop="senderPhone"
                label="发件人电话"
                width="110"
              >
              </el-table-column>
              <el-table-column
                prop="senderAddress"
                label="发件人地址"
                width="180"
              >
                <template slot-scope="scope">
                  {{ scope.row.senderProvince.name }}
                  {{ scope.row.senderCity.name }}
                  {{ scope.row.senderCounty.name }}
                  {{ scope.row.senderAddress }}
                </template>
              </el-table-column>
              <el-table-column
                prop="receiverName"
                label="收件人姓名"
                width="100"
              >
              </el-table-column>
              <el-table-column
                prop="receiverPhone"
                label="收件人电话"
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="receiverProvince.name "
                label="收件人地址"
                width="170"
              >
                <template slot-scope="scope">
                  {{ scope.row.receiverProvince.name }}
                  {{ scope.row.receiverCity.name }}
                  {{ scope.row.receiverCounty.name }}
                  {{ scope.row.receiverAddress }}
                </template>
              </el-table-column>
              <el-table-column
                prop="pickupType"
                label="取件类型"
                width="80"
              >
              </el-table-column>
              <el-table-column
                prop="paymentMethod"
                label="付费类型"
                width="80"
              >
              </el-table-column>
              <el-table-column
                prop="paymentStatus"
                label="付费状态"
                width="80"
              >
              </el-table-column>

              <el-table-column
                fixed="right"
                align="center"
                label="操作"
              >
                <template
                  slot-scope="scope"
                >
                  <el-link
                    type="primary"
                    size="small"
                    @click="btnEdit(
                      scope.row.id,
                      scope.row.status,
                      scope.row.pickupType,
                      scope.row.transportOrder === null
                        ? ''
                        : scope.row.transportOrder.id
                    )"
                  >查看详情</el-link>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <!-- 分页 -->
          <template>
            <div
              class="block"
              align="center"
            >
              <span class="demonstration"></span>
              <el-pagination
                :current-page="Number(orderSearchFormData.page)"
                :page-sizes="[10, 20, 30, 60]"
                :page-size="Number(orderSearchFormData.pageSize)"
                layout="total, sizes, prev, pager, next, jumper"
                :total="Number(total)"
                @current-change="handleCurrentChange"
              >
              </el-pagination>
            </div>
          </template>
        </div>
      </template>

    </div>
  </div>
</template>
<script>
import { orderList } from '@/api/order'
import options from '@/api/orderstatus.json'
import payStatus from '@/api/paymentStatus.json'
import getProvince from '@/api/city.json'
export default {

  data() {
    return {
      id: '',
      tableKey: 0,
      total: null,
      dataList: [],
      listLoading: true,
      searchkey: false,
      orderSearchFormData: {
        page: 1,
        pageSize: 10,
        orderId: '', // 订单编号
        status: '', // 订单状态
        paymentStatus: '', // 付款状态
        senderName: '', // 发件人姓名
        senderPhone: '', // 发件人电话
        receiverName: '', // 收件人姓名
        receiverPhone: '', // 收件人电话
        senderProvince: '', // 发件人省份
        senderCity: '', // 发件人城市
        senderCounty: '', // 发件人区县
        receiverProvince: '', // 收件人省份
        receiverCity: '', // 收件人城市
        receiverCounty: '' // 收件人区县
      },
      requestParamsProvince: {
        parentId: 0
      },
      orderStatusOptions: '',
      pickUpTypeOptions: '',
      listId: [],

      tableData: [], // 列表数据
      provinceList: [], // 省列表
      cityList: [], // 市列表
      countyList: [], // 区列表
      cityValue: 0, // 自定义value 获取省份id
      countyValue: 0, // 自定义value 获取市级id
      receiverList: [], // 收件人省列表
      receiverCityList: [], // 市列表
      receiverCountyList: [], // 区列表
      receiverCityValue: 0, // 自定义value 获取省份id
      receiverCountyValue: 0 // 自定义value 获取市级id

    }
  },
  created () {
    this.provinceList = getProvince
    this.receiverList = getProvince
    this.statusOptions = options
    this.PayStatus = payStatus
    this.orderList()
    this.orderSearchFormData.status = this.$route.query.status ? Number(this.$route.query.status) : '' // 三元表达式判断是否有值
  },
  methods: {
    // 通过change事件获取省市区
    change(value) {
      // 清空发件人城市
      this.orderSearchFormData.senderCity = ''
      // 清空发件人县区
      this.orderSearchFormData.senderCounty = ''
      this.countyList = ''
      this.cityValue = value
      this.provinceList.forEach(item => {
        if (item.areaId === this.cityValue) {
          this.cityList = item.cities
        }
        // 如果省份没选中 清除发件人城市列表
        if (!value) {
          this.cityList = ''
        }
      })
    },
    // 发件人县区
    changecity(value) {
      this.orderSearchFormData.senderCounty = ''
      this.countyList = value
      this.cityList.forEach(item => {
        if (item.areaId === this.countyList) {
          this.countyList = item.counties
        }
        // 如果城市没选中 清除发件人县区列表
        if (!value) {
          this.countyList = ''
        }
      })
    },
    // 收件人省市
    changeReceiver(value) {
      // 清空收件人城市
      this.orderSearchFormData.receiverCity = ''
      // 清空发件人县区
      this.orderSearchFormData.receiverCounty = ''
      this.receiverCountyList = ''
      this.receiverCityValue = value
      this.receiverList.forEach(item => {
        if (item.areaId === this.receiverCityValue) {
          this.receiverCityList = item.cities
        }
        // 如果省份没选中 清除收件人城市列表列表
        if (!value) {
          this.receiverCityList = ''
        }
      })
    },
    // 获取收件人县区
    changereceivercity(value) {
      this.orderSearchFormData.receiverCounty = ''
      this.receiverCountyList = value
      this.receiverCityList.forEach(item => {
        if (item.areaId === this.receiverCountyList) {
          this.receiverCountyList = item.counties
        }
        // 如果城市没选中 清除收件人县区列表
        if (!value) {
          this.receiverCountyList = ''
        }
      })
    },
    // 获取订单列表数据
    async orderList () {
      this.listLoading = true
      const res = await orderList(this.orderSearchFormData)
      this.listLoading = false
      // 获取数据给dataList
      this.dataList = res.data.items
      // 获取总条数
      this.total = res.data.counts
    },
    // 重置
    resetForm(formData1) {
      if (this.$refs[formData1] !== undefined) {
        this.$refs[formData1].resetFields()
      }
      this.cityList = {}
      this.orderSearchFormData.page = 1
      this.orderSearchFormData.pageSize = 10
      this.orderSearchFormData.id = ''
      this.orderSearchFormData.status = ''
      this.orderSearchFormData.paymentStatus = ''
      this.orderSearchFormData.senderName = ''
      this.orderSearchFormData.senderPhone = ''
      this.orderSearchFormData.receiverName = ''
      this.orderSearchFormData.receiverPhone = ''

      this.orderSearchFormData.receiverCity = ''
      this.orderSearchFormData.receiverCounty = ''
      this.orderSearchFormData.receiverProvince = ''

      this.orderSearchFormData.senderProvince = ''
      this.orderSearchFormData.senderCity = ''
      this.orderSearchFormData.senderCounty = ''
      this.searchkey = false
      this.orderList()
    },
    // 搜索信息
    handleFilter() {
      this.orderSearchFormData = {
        ...this.orderSearchFormData,
        status:
          this.orderSearchFormData.status === 0
            ? ''
            : this.orderSearchFormData.status
      }
      this.orderSearchFormData.page = 1
      this.orderList()
      this.searchkey = true
    },

    // 点击跳转到订单详情页面
    btnEdit(id, status, pickupType, transportOrderId) {
      this.$router.push({
        path: '/business/edit-order',
        query: { orderId: id, status: status, pickUpType: pickupType, transportOrderId }
      })
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.orderSearchFormData.page = val // 赋值当前页码
      this.orderList()
    },
    // 序号自增
    indexMethod(index) {
      const currpage = this.orderSearchFormData.page // 当前页码，具体看组件取值
      const limitpage = this.orderSearchFormData.pageSize // 每页条数，具体是组件取值
      return index + 1 + (currpage - 1) * limitpage
    }

  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}

// 下拉框
::v-deep .el-select {
  width: 100%;
}
</style>

<style lang="scss" scoped>
.order-list ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
.el-cart{
  margin-top: 20px;
}

.Order{
  background-color: #fff;
  height: 260px;
  display: flex;
  .el-form-item {
    margin-top: 20px;

  }
}
.orderSreach{
  position: absolute;
  top: 260px;
  left: -80px;
}

.block{
  padding-top: 40px;
  padding-bottom: 40px;
  margin-bottom: 50px;
  background-color: #fff;
}

::v-deep label{
  font-weight: 400 !important;
}
</style>
